import React, {Component} from 'react';
import {Popup, Tab,Button,Group,Field ,NumberPicker,SelectField, TextField,NoticeBar,CheckboxField,Toast,Grid  } from 'saltui';

import Number from  '../../room/Number'
import InputText from '../diy/InputText'
import InputChecked from '../diy/InputChecked'
import  Ajax  from '../../../../Common/Ajax';
import InputSelected from '../diy/InputSelected'
import HDateTime from '../diy/HDateTime'

/**
 *
 */
export default class RoomCellHandle extends React.Component {
  constructor(props) {


    super(props);
    this.state = {
      prices :[],
      data:{
        id:this.props.id,
        floor:this.props.floor,
        name: this.props.room_name,
        price: this.props.price,
        roomtype:this.props.roomtype,
        roomstatus:this.props.roomstatus,
        people:this.props.people_num,
        amenities:this.props.amenities,
        prices:this.props.prices,
        total_price: this.props.total_price,
      },


    };
    this.state.buttonName = this.props.buttonName;
    this.post = {
        id:this.props.id,
        start_date:this.props.start_date,
        end_date:this.props.end_date,
        guest:[]
    }

  }

  handleTextChange = (index,id,value) =>{
    let data = this.post;

    if(typeof data['guest'][index] == 'undefined'){
      data['guest'][index] = {};
    }
    data['guest'][index][id] = value;
    this.post.guest = data['guest'];
  }

  handleCheckIn = () =>{
    Toast.show({
      type: 'loading',
      content: '保存中...',
      autoHide:false
    });


    setTimeout(() => {
      Ajax.post("room/checkin",this.post);
      Toast.hide(() => {
      });

      Toast.show({
        type: 'loading',
        content: '保存成功',
      });

      Popup.hide();
      this.props.onChange(this.props.typeid);
    }, 2000);
  }



  dateSuccess = (data) =>{

    let datas= this.state.data
    datas.prices= data.prices;
    datas.total_price= data.total_price;
    this.setState({data: datas});




  }

  dateSelect = (date) =>{

    let dates = {};
    dates['s_date'] = date[0];
    dates['e_date'] = date[1];
    this.post.start_date = date[0];
    this.post.end_date = date[1];
    dates['id'] = this.props.id;
    Ajax.post("room/price",dates,this.dateSuccess);

  }


  render() {
    let that = this;
    return <div className="demo-popup-container">
      <div className="H-Scroller">
        <div className='b-row'>
          <Grid col={2} className="t-BCf H-room-handle-content"　itemHAlign="start" itemVAlign="start"　 >

            <div className="H-left">

              <div className="b-col-12 H-abstract">
                <h3>客房摘要</h3>
              </div>

              <div className="b-col-12">
                <h3> {this.props.floor_name}</h3>
              </div>

              <div className="b-col-12">
                <h3>{this.state.data.name}</h3>
              </div>

              <div className="b-col-12">
                <h4>{this.state.data.amenities.join(",")}</h4>
              </div>

              <div className="b-col-12">
                <h4>可住最多{this.state.data.people}位客人</h4>
              </div>

            </div>

            <div className="H-right">

              <div className="b-col-12 H-abstract">
                <h3>费用摘要</h3>
              </div>


              <div className="b-col-12 H-datetime" >

                <span> 入住时间 </span>   <span> <HDateTime start_date={this.props.start_date}  end_date={this.props.end_date}  onChange={this.dateSelect} /> </span>
              </div>

              {
                this.state.data.prices.map((price,index) =>
                  <div className= {index == 0 ? 'b-col-12 subtotal' : 'b-col-12 especially'}>
                    <span>{price.name}</span> <span>${price.number} USD</span>
                  </div>
                )
              }

              <div className="b-col-12 total">
                <span>总计</span> <span>${this.state.data.total_price} USD</span>
              </div>

            </div>

          </Grid>
        </div>


        <div className="notice-div">
          <NoticeBar className="noticeMessage" message={"客房详细"} closable={false} type="warning" />
        </div>

        <Group.List className="H-room-handle-guest" >

          {
            this.props.people_nums.map((people_num,index) =>
              <Field label={"客人"+(index+1)}>
                <div>
                  <InputText  placeholder="姓名"  onChange={(value,id)=>{
                    this.handleTextChange((index+1),'name',value);
                  }}  />
                  <InputText  placeholder="id卡"  onChange={(value,id)=>{
                    this.handleTextChange((index+1),"id",value);
                  }}  />
                </div>
              </Field>
            )
          }
        </Group.List>
      </div>


      <div className="demo-line">
        <Button type="secondary"  size="small"  onClick={this.handleCheckIn}  >入住</Button>
        <Button type="secondary"  size="small"  >取消</Button>
      </div></div>
  }
}
